mixin optionButton(bind, isActive, text, title)
  .button-checkbox
    button(type="button" class="dropdown-item btn btn-sm btn-light" + (isActive ? " active" : "") title=title data-bind=bind aria-pressed=isActive ? "true" : "false")
      span #{text}
    input.d-none(type="checkbox" checked=isActive)

#opt-pipeline
  .top-bar.btn-toolbar.bg-light(role="toolbar")
    include ../../font-size
    .btn-group.btn-group-sm.options(role="group")
      button.btn.btn-sm.btn-light.dropdown-toggle(type="button" title="Opt Pass Options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Set output options")
        span.fas.fa-anchor
        span.hideable Options
      .dropdown-menu
        +optionButton("dump-full-module", false, "Dump Full Module", "Dump the entire module for each pass")
        +optionButton("demangle-symbols", true, "Demangle Symbols", "Demangle symbols")
        +optionButton("-fno-discard-value-names", true, "-fno-discard-value-names", "Keep value names instead of LLVM value numbers")
    .btn-group.btn-group-sm.filters(role="group")
      button.btn.btn-sm.btn-light.dropdown-toggle(type="button" title="Opt Pass Filters" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Set output filters")
        span.fas.fa-filter
        span.hideable Filters
      .dropdown-menu
        +optionButton("filter-inconsequential-passes", false, "Hide Inconsequential Passes", "Filter passes which do not make changes")
        +optionButton("filter-debug-info", true, "Hide Debug Info", "Filter debug info intrinsics")
        +optionButton("filter-instruction-metadata", true, "Hide Instruction Metadata", "Filter all IR metadata")
        //- +optionButton("library-functions", true, "Filter Library Functions", "Filter library functions")
    .btn-group.btn-group-sm
      .input-group.input-group-sm.mb-auto
        .input-group-prepend
          label.input-group-text.opt-group-name
            | Function:&nbsp;
        select.opt-group-picker.group-selector(placeholder="Select group")
  div.opt-pipeline-body
    .passes-column(style="width: 250px;") Passes:
      input.passes-filter(placeholder="Filter passes")
      .passes-list
    .passes-column-resizer
      .passes-column-resizer-handle
    .monaco-placeholder
